<template>
    <view>
        <!-- 顶部轮播图 -->
        <view class="swiper">
            <view class="top-part">
                <img-cache :src="SkuPicID ? `${global.productImageUrl}${SkuPicID}/1` : `/static/images/placeholder.png`" width="400" height="400" border-radius="20" @click="preview(`${global.productImageUrl}${SkuPicID}/0`)" />
                <view class="right">
                    <view>
                        共
                        <text class="o-font-color-error">{{ badge }}</text>
                        件
                    </view>
                    <view>
                        小计：
                        <text class="o-font-color-error">￥{{ Number(totalPrice).toFixed(2) }}</text>
                    </view>
                    <view class="remain" v-if="remain">当日还可采购该商品{{ remain }}件</view>
                </view>
            </view>
            <view class="bottom-part">
                <view class="swiper-sku-name">{{ selectItem.collar }} {{ selectItem.colorName }}</view>
            </view>
        </view>
        <view class="wrap-popup">
            <!-- 尺码 以及数量 -->
            <view class="title u-padding-left-20">选择尺码</view>
            <view class="skus-info">
                <view class="skus-info-item" v-for="(res, idx) in selectItem.skus" :key="'sku' + res.id">
                    <view class="u-flex-1">
                        <view>
                            <text style="color: #8c8c8c" v-if="res.sizeName">尺码：</text>
                            <text>{{ res.sizeName }}</text>
                        </view>
                        <view>
                            <text style="color: #8c8c8c">单价：</text>
                            <text class="o-font-color-error" v-if="orderType === 0">￥{{ Number(res.userPrice).toFixed(2) }}</text>
                            <text class="o-font-color-error" v-else>￥{{ res.samplePrice }}</text>
                        </view>
                    </view>
                    <view class="" v-if="orderType === 0">
                        <u-number-box v-model="res.num" :disabled="res.stock <= 0" :index="idx" @change="countchange($event, res)" :max="res.stock" />
                        <view class="skus-stock">{{ $STOCK(res.stock) }}</view>
                    </view>
                    <view v-else>
                        <u-number-box v-model="res.num" :disabled="res.stock <= 0" :index="idx" @change="countchange($event, res)" :max="res.sampleNumLimit" />
                        <view class="skus-stock">样品限：{{ res.sampleNumLimit }}</view>
                    </view>
                </view>
            </view>
            <view style="height: 120rpx"></view>
        </view>
        <view class="btns">
            <view class="safe-area-inset-bottom">
                <u-button type="p" @click="confirm">确认</u-button>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import global from '@/config'
import { ref, computed } from 'vue'
import { useGlobalStore, useSkuCuntStore } from '@/store'
import { onReady } from '@dcloudio/uni-app'

const SkuPicID = ref('')
const badge = ref(0)
const totalPrice = ref(0)
const remain = ref<undefined | number>(0)
const selectItem = ref<any>({})
const orderType = ref(0)

const globalStore = useGlobalStore()
const skuCountStore = useSkuCuntStore()

/** 库存字段 */
const $STOCK = computed(() => {
    return function (num: number | string) {
        return globalStore.setStockName(num)
    }
})
const selectSkus = computed(() => {
    return skuCountStore.selectSkus
})

const currentColor = computed(() => {
    return skuCountStore.currentColor
})

function countchange(e: any, item: any) {
    item.num = e.value
    reRenderBadgeANDTotalPrice()
}

/** 重新渲染 角标 小计  件数 */
function reRenderBadgeANDTotalPrice() {
    let temp = 0
    let price = 0
    selectItem.value.skus.map((m: any) => {
        if (!m.num) {
            m.num = 0
        }
        temp += m.num
        price += m.num * m.userPrice
    })
    totalPrice.value = price
    badge.value = temp
}

function preview(url: string) {
    uni.previewImage({
        urls: [url]
    })
}

function confirm() {
    uni.$u.$MRouter.back()
}

onReady(() => {
    selectItem.value = currentColor.value
    reRenderBadgeANDTotalPrice()
    SkuPicID.value = selectItem.value.picId
})
</script>

<style scoped lang="scss">
// 解决 H5 步进器 样式异常
/* #ifdef H5 */
:deep(.u-number-input) {
    border: none;
}
/* #endif */

@mixin flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: $direction;
}

.swiper {
    position: relative;
    padding: 20rpx;

    &-content {
        height: 480rpx;
        background-color: white;
        padding: 20rpx;
        padding-bottom: 0;
    }

    .top-part {
        @include flex;
        position: relative;

        .right {
            flex: 1;
            @include flex(column);
            justify-content: center;
            align-items: center;
            font-weight: bold;

            .remain {
                font-size: 24rpx;
                text-align: center;
                line-height: 50rpx;
                color: #4a4a4a;
            }
        }
    }

    .bottom-part {
        @include flex;

        .swiper-sku-name {
            width: 400rpx;
            text-align: center;
            font-weight: bold;
        }
    }
}

.wrap-popup {
    .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
        line-height: 60rpx;
    }

    .skus-info {
        background-color: white;
        padding: 0 20rpx;

        .skus-info-item {
            display: flex;
            border-bottom: 1rpx solid #cccccc;
            padding: 20rpx 0;
        }

        .skus-stock {
            font-size: 24rpx;
            color: #b5b5b5;
            text-align: right;
        }
    }
}

.btns {
    position: fixed;
    bottom: 0;
    width: 100vw;
    padding: 20rpx 30rpx;
    background-color: white;
}
</style>
